<template>
  <div class="fatherBox">
    <el-card>
      <el-form
        style="width: 80%; margin-left: 25%; margin-top: 5%"
        ref="rulePopulationRef"
        :model="population"
        :rules="rules"
      >
        <el-form-item label="身份证号：" prop="idNumber">
          <el-col :span="12">
            <el-input v-model="population.idNumber" />
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="2"
            ><el-button type="primary" @click="inquireRecordsClick"
              >查询</el-button
            ></el-col
          >
          <el-col :span="9"></el-col>
        </el-form-item>
      </el-form>
      <div align="center" style="font-size:medium; margin-top: 5%;">户口变动记录</div>
        <el-table  :data="changeTableData" border 
        style="margin-top: 10px; margin-left: 10%;width: 80%;margin-bottom:3%" 
        :row-style="{height:'5vh!important'}">
          <el-table-column prop="householdMember" label="姓名"/>
          <el-table-column prop="householdHead" label="户主"/>
          <el-table-column prop="changeType" label="变动类型"/>
          <el-table-column prop="changeDate" label="变动日期"/>
          <el-table-column prop="description" label="变动原由"/>
          <el-table-column prop="handlingPoliceStation" label="办理派出所"/>      
        </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive} from "vue";
import { populationRecords } from "@/api/population_change/changeIn/populationRecords.js";
import{ dateChange } from "@/core/dateChange.js"

//表单引用
const rulePopulationRef= ref()
//表单验证规则
const rules = {
  idNumber: [
    { required: true, message: '请输入被投靠人身份证号', trigger: 'blur' },
    { pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  // 其他字段的验证规则
};

//查询人信息
const population = reactive({
  name:'',
  gender:'',
  birthDate:'',
  idNumber:'',
  householdNumber:'',
  maritalStatus:'',
  educationLevel:'',
  currentAddress:'',
});

//变动记录展示
const changeTable = reactive({
  //查询人
  householdMember:'',
  //户主
  householdHead:'',
  //变动类型
  changeType:'',
  //变动日期
  changeDate:'',
  //描述
  description:'',
  //派出所
  handlingPoliceStation:'',
})

//户口迁入表内容
const changeTableData=reactive([changeTable,])

//查询按钮（查询被投靠人信息）
const inquireRecordsClick= async () =>{
  //清空表格
  changeTableData.splice(0, changeTableData.length);
  //触发表单验证
  const isValid = await rulePopulationRef.value.validate();
  //验证通过
  if(isValid){
    var data=(await populationRecords(population)).data
    await ElMessage.success("查询完成")
    // 将后端传来的数据添加到changeTableData
    await data.forEach(data => {
      data.changeDate=dateChange(data.changeDate)
      changeTableData.push(data);
    });
  }
}
</script>

<style>
.fatherBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.el-card {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  /* 可以根据需要调整这个值 */
}
</style>